<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>模拟即时聊天</title>

<!--格式化json需要的js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js" integrity="sha512-QE2PMnVCunVgNeqNsmX6XX8mhHW+OnEhUhAWxlZT0o6GFBJfGRCfJ/Ut3HGnVKAxt8cArm7sEqhq2QdSF0R7VQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.min.js" integrity="sha512-6qbnCNQe7wVcBDvhNJT6lZsbDKHCQQBk7yOBQg4s/9GG812CknK0EEIqG2IS10XuNxIQNWjMJd6VLwwezICz6w==" crossorigin="anonymous"></script>

<script>
    //var ws = new WebSocket("ws://127.0.0.1:6262"); //本地测试
    //var ws = new WebSocket("ws://192.168.101.3:9022"); //本地测试
    // var ws = new WebSocket("ws://47.108.90.224:9022"); //小服务器测试
    // var ws = new WebSocket("ws://192.168.101.133:19967"); //本地测试
    var ws = new WebSocket("ws://192.168.101.133:19966"); //本地测试


    // 开启连接的时候 发送消息 连接服务器
    // 登录的时候的操作
    // 后台保证用户与用户端唯一id绑定
    ws.onopen = function () {
        var uid = 2;
        var login_data = '{"cmd":"user@bang","uid":' + uid + '}';
        console.log("websocket握手成功，发送登录数据:" + login_data);
        ws.send(login_data);

        // 测试我绑定的客户端
        // 经过测试 当某个客户端断开的时候，绑定的客户端也会断开
        var login_data2 = '{"cmd":"user@myBang","uid":' + uid + '}';
        console.log("测试:查看我绑定的客户端：" + login_data2);
        ws.send(login_data2);
    };

    // 关闭
    ws.onclose = function (evt) {
        // 刷新，不能实现这里
        // 可以断网，可以看到这里已经实现
        console.log("================>退出：", "I'm sorry. Bye!");
    };
    // 消息 具体见下面改写
    ws.onmessage = function (evt) {
        // handle messages here
        console.log('返回得到的是数据', evt.data)
    };
    // 错误
    ws.onerror = function (evt) {
        console.log("ERR: " + evt.data);
    };


    // 显示到页面
    ws.onmessage = function (evt) {
        console.log('返回数据信息：', evt.data);

        // 解析data数据json
        var data = eval('(' + evt.data + ')');
        var result_id = document.getElementById("result");
        var code = data.code;

        // 错误
        if (code && (code !== 200)) {
            result_id.innerHTML = result_id.innerHTML + "<p>" + '命令：' + data.cmd + "</p>";
            //result_id.innerHTML="<p>"+'错误：'+data.message+"<br/><br/>";

            if (data.sql) {
                result_id.innerHTML = result_id.innerHTML + "<p>" + 'SQL语句：' + data.sql + "</p>";
            }
            if (data.yufa) {
                result_id.innerHTML = result_id.innerHTML + "<p>" + '语法错误：' + data.yufa + "</p>";
            }

            console.log('返回错误：', data.message);
            result_id.innerHTML = result_id.innerHTML + "<p>" + '错误：' + data.message + "</p><br/>";
        } else {
            // 没有错误
            content = JSON.stringify(data);  // 格式化中文变成斜杠的字符串 转换成 中文

            //content_json     = jsonlint.parse(content);
            //content_json_str = JSON.stringify(content_json);

            content_result = JSON.stringify(content, null, 2); //将字符串转换成json对象
            //content_result = new JSONFormat(content, 4).toString();

            result_id.innerHTML = result_id.innerHTML + "<p>" + '命令：' + data.cmd + "</p>";
            result_id.innerHTML = result_id.innerHTML + "<p>" + content_result + "</p><br/>";

        }
    };

    // 发送消息
    function Test() {
        var textarea = document.getElementById("textarea");
        var content = textarea.value.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r');
        var content = textarea.value;

        console.log(content);
        ws.send(content);
    }

    // 握手
    function handshake() {
        var textarea = document.getElementById("handshake");
        var uid = textarea.value;
        var login_data = '{"cmd":"user@bang","uid":' + uid + '}';
        console.log("websocket握手成功，发送登录数据:" + login_data);
        ws.send(login_data);

        // 测试我绑定的客户端
        // 经过测试 当某个客户端断开的时候，绑定的客户端也会断开
        var login_data2 = '{"cmd":"user@myBang","uid":' + uid + '}';
        console.log("测试:查看我绑定的客户端：" + login_data2);
        ws.send(login_data2);
    }

    // 向指定客户端发送消息
    function zhiding() {
        var textarea = document.getElementById("zhiding");
        var client_id = textarea.value;
        var login_data = '{"cmd":"user@send","uid":2,"to_client":"' + client_id + '"}';
        console.log("发送数据成功:" + login_data);
        ws.send(login_data);
    }

    // 发送消息
    function qunfa() {
        var text = document.getElementById("qunfa");
        var content = text.value;

        console.log(content);
        ws.send(content);
    }

    // 发送消息
    function sifa() {
        var text = document.getElementById("sifa");
        var content = text.value;

        console.log(content);
        ws.send(content);
    }

    // 发送消息
    function receive() {
        var text = document.getElementById("receive");
        var content = text.value;

        console.log(content);
        ws.send(content);
    }

    // 发送消息
    function receive2() {
        var text = document.getElementById("receive2");
        var content = text.value;

        console.log(content);
        ws.send(content);
    }

    // 清空返回框
    function Clear() {
        document.getElementById('result').innerHTML = '';
    }

    var xxx = "hello";
</script>
<style>
    input[type=text] {
        width: 820px;
        padding-left: 5px;
    }
</style>
<body style="margin: auto;width:1020px;">
<div class="show">

    <h2>接口测试：模拟即时聊天</h2>
    <h5>接口测试：模拟即时聊天</h5>
    <?php
    // 获取音频文件
    /*$file        = './xaioyinpin.m4a';
    $PSize       = filesize($file);
    $picturedata = fread(fopen($file, "r"), $PSize);
    file_put_contents('./xiaolingcun.mp3', $picturedata);    //保存文件
    $picturedata = base64_encode($picturedata);
    //echo $picturedata;*/
    ?>

    <!--握手-->
    <input type="text" id="handshake" value="1" style="width:100px;"/>
    <input type="button" value="握手链接" onclick="handshake();">
    <br/>

    <!--握手-->
    <input type="text" id="zhiding" value="7f00000108ff00000001" style="width:250px;"/>
    <input type="button" value="指定客户端发送消息" onclick="zhiding();">
    <br/>

    <!--群发-->
    <input type="text" id="qunfa" value='{"cmd":"groups@chat", "uid":"2", "username":"xxx", "group_id":"2", "say":"我对你说话了！！"}'/>
    <input type="button" value="群发" onclick="qunfa();">
    <br/>

    <!--个人聊天-->
    <input type="text" id="sifa" value='{"cmd":"friend@chat", "uid":"2", "username":"xxx", "f_uid":"1", "say":"我对你说话了！！"}'/>
    <input type="button" value="个人聊天" onclick="sifa();">
    <br/>

    <!--测试消息-->
    <input type="text" id="receive" value='{"cmd":"test@receive", "username":"xxx", "say":"我对你说话了！！"}'/>
    <input type="button" value="测试消息" onclick="receive();">
    <br/>

    <!--测试消息-->
    <input type="text" id="receive2" value='{"cmd":"test@receive", "username":"xxx", "mp3":"<?php echo $picturedata; ?>"}'/>
    <input type="button" value="测试音频消息" onclick="receive2();">
    <br/>

    <!--在线测试-->
    <textarea id="textarea">{"cmd":"friend@chat", "uid":"2", "username":"xxx", "f_uid":"1", "say":"我对你说话了！！"}</textarea><br/>


    <div>
        <input type="button" onclick="Test();" value="提交" style="margin-left: 350px;width: 100px;;float: left;">
        <input type="button" onclick="Clear();" value="清空记录" style="width: 100px;float: left;">
    </div>
    <br/><br/>

    <!--显示结果-->
    <div id="result"></div>
    <br/><br/><br/><br/>

</div>

<style>
    #result {
        display: block;
        padding: 9.5px;
        margin: 5px 0 10px;

        font-size: 16px;
        line-height: 30px;
        text-align: left;
        width: 950px;
        word-wrap: break-word;
        word-break: break-all;
    }

    #result p {
        background-color: #f5f5f5;
    }

    #textarea {
        font-size: 18px;
        line-height: 30px;
        height: 100px;
        width: 1020px;
        margin-bottom: 10px;
    }

    h2, h3, h4, h5 {
        margin: 15px;
        text-align: center;
    }

    input {
        font-size: 1rem;
        line-height: 30px;
        color: #666;
        border: 1px solid #dce4e6;
        margin: 4px;
    }

</style>
<!--描点：返回顶部-->
<a href="#top">
    <div style="position: fixed; width: 40px; height: 40px; background: rgb(0, 136, 204); cursor: pointer; bottom: 181px; right: 100px; border-radius: 10px;">
        <div style="width: 0px; height: 0px; margin: 0px auto; padding-top: 13px; border-style: solid; border-width: 0px 10px 10px; border-color: transparent transparent rgb(255, 255, 255);"></div>
    </div>
</a>

<!--描点：返回顶部-->
<a href="#bottom">
    <div style="position: fixed; width: 40px; height: 40px; background: rgb(0, 136, 204); cursor: pointer; top: 181px; right: 100px; border-radius: 10px;">
        <div style="width: 0px; height: 0px; margin: 0px auto; padding-top: 13px; border-style: solid; border-width: 0px 10px 10px; border-color: transparent transparent rgb(255, 255, 255);"></div>
    </div>
</a>
<lable id="bottom"></lable>
</body>
</html>









